<template>
  <div class="layout-container">
    <el-container>
      <el-aside  :width="asideWidth">
        <h3 class="login-titile">小U商城後台</h3>
        <!-- 父组件向子组件传递数据: 第一步 在调用的组件标签动态绑定要传的值-->
          <Navbar :collapse="collapse"/>
      </el-aside>
      <el-container>
        <el-header>
          <div class="left">
            <el-button
            @click="toggle"
              size="mini"
              type="primary"
              class="el-icon-s-fold"
            ></el-button>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }"
                >管理中心</el-breadcrumb-item
              >
              <el-breadcrumb-item>功能頁面</el-breadcrumb-item>
              <el-button size="mini" circle icon="el-icon-back" @click="$router.go(-1)"></el-button>
            </el-breadcrumb>
          </div>
          <div class="right">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{loginInfo.username}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="userInfoEdit">
                  <i class="el-icon-user"></i>
                  個人信息
                </el-dropdown-item>
                <fullscreen ref="fullscreen">
                  <el-dropdown-item command="fullScreen">
                    <i class="el-icon-full-screen" @click="fullScreen"></i>
                    全屏預覽
                  </el-dropdown-item>
                </fullscreen>
                <el-dropdown-item @click="logout" command="logout">
                  <i class="el-icon-switch-button"></i>
                  安全退出
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <!-- 路由里套路由即是二级路由
             路由变换，不一定就是变换整个页面，可能是一个页面的某个部分，而这个页面可能就是一个路由；在这个路由里面router-view是它的次级路由的显示屏
             3，虽然显示屏有了，可是，要让他切换还需要一些事件，它可以是一个点击事件加上一个$router.push() 括号里放的是路径  ，就显示出你实现规定的路径页面了，前提是这个页面你已经写好了东西
             4，除此之外，你还需要在路由文件定义一套路由规则，你写好的局部页面是从何处引入？是在哪个路由下的页面，那这样一个次级路由就要放在它之内，作为children ,在这一切之后，你还需要实例这套路由对象routes，并且暴露-->

          <!-- 二級路由出口 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import Navbar from "../component/Navbar";
// 导入全屏组件
import fullscreen from "vue-fullscreen";
import Vue from "vue";
// 2-注册
Vue.use(fullscreen);
export default {
  components: {Navbar},
  computed:{
    ...mapState(['loginInfo'])
  }
  ,
  data(){
    return {
      // 侧边栏宽度
      asideWidth:'226px',
      // 侧边栏折叠状态: false不折叠
      collapse:false,
    }
  },
  methods: {
    ...mapMutations(['loginInit']),
    // 切换菜单的折叠状态
    toggle(){
      // 1-修改el-menu组件上的collapse属性的值: true | false
      this.collapse=!this.collapse;
      // 2-动态设置侧边栏el-aside的宽度: 226px | 64px
      // 上一条必须在它的上面，
      this.asideWidth=this.collapse?'64px':'226px';  
    },
    fullScreen() {
      this.$refs.fullscreen.toggle();
    },
    // 编辑当前登录信息
    userInfoEdit() {
      // console.log("dhd");
      this.$router.push(`/guan/${this.loginInfo.uid}`)
    },
    logout() {
      // console.log('logout')
      // 清空登陆凭证实现页面跳转
      sessionStorage.removeItem("userinfo");
      this.$router.push("/login");
      this.$success("成功退出！");
    },
    handleCommand(command) {
      // this.$message('click on item ' + command);
      this[command]();
    },
  },
  created(){
    // 获取当前登录的人名和uid
    const info=JSON.parse(sessionStorage.getItem('userinfo') || '{}')
    // 将获得的人名和uid给loginInit方法
    this.loginInit({uid:info.uid,username:info.username})
  }
};
</script>

<style lang='less' scoped>
.layout-container {
  height: 100vh;
  .el-container {
    height: 100%;
    overflow: hidden;
    .login-titile {
      line-height: 60px;
      background-color: #444444;
      color: #fff;
       // 取消自动换行
      white-space:nowrap;
      // 字间距
      letter-spacing: 5px;
    }
  }
}

.el-header {
  background-color: #fff;
  color: #333;
  line-height: 60px;
  box-shadow: 0 0 4px 2px #666;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    margin: 0 5px;
    .el-breadcrumb {
      margin: 0 10px;
      line-height: 24px;
    }
  }
}
.el-main {
  background-color: #fff;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>